Add modern card-based Tools Page webview for Power Platform ToolBox by Copilot · Pull Request #296 · Power-Maverick/DataverseDevTools-VSCode

Copilot · 2025-10-12T09:53:58Z

Overview

This PR implements a dedicated webview page that displays all tools from the Power Platform ToolBox with a modern, card-based design inspired by XrmToolBox, making it easier to view tool details and launch them directly from a comprehensive interface.

Problem

Previously, users could only see the tools in a side panel tree view, which made it difficult to:

View details about each tool at a glance
Understand what tools are available in the toolbox
Quickly access and launch tools

Solution

A new Tools Page webview with a modern card-based interface that provides:

🎨 Modern Card Interface

Card-based layout inspired by XrmToolBox design
Displays all 4 tools currently in the toolbox:
- Dataverse REST Builder (drb) by Guido Preite - Build and test Web API queries
- Plugin Registration (prt) by Microsoft - Manage plugins and workflows
- Configuration Migration (cmt) by Microsoft - Move configuration data
- Package Deployer (pd) by Microsoft - Deploy packages with automation
Shows tool name, author, detailed description, and launch action in beautiful cards
Visual icons for each tool (🔧 🔌 📦 🚀)
Hover effects with smooth transitions and elevation
Gradient backgrounds on tool icons
Responsive grid layout that adapts to screen size

🔍 Enhanced Search

Real-time search box that filters tools as you type
Searches across all fields: name, author, and description
Instant results with smooth animations

🚀 Quick Launch

Click anywhere on a card to launch the tool
Dedicated launch buttons with play icons (▶)
Visual feedback on hover and click
One-click access to any tool

🎯 Multiple Access Points

Command Palette: Type Show Tools Page
Toolbox Panel: Click the table icon (📊) in the panel header

Implementation Details

New Files

resources/views/toolslist.html - Modern HTML template with card grid layout
src/views/ToolsListView.ts - View class that renders tool cards with proper HTML escaping

Modified Files

resources/views/js/base.js - Updated search functionality to work with cards
resources/views/css/base.css - Added 150+ lines of modern card styling with gradients, animations, and hover effects
src/tools/tools.json - Added detailed descriptions and emoji icons for each tool
src/utils/Interfaces.ts - Extended IToolDetails interface with optional description and emoji fields
src/commands/registerToolsCommands.ts - Added showToolsPage and launchToolByShortName commands
package.json - Added commands and menu items

Technical Highlights

Modern card-based design inspired by XrmToolBox
Responsive CSS Grid with auto-fill for flexible layouts
Smooth animations including hover effects, transitions, and transforms
Follows existing patterns: Consistent with refactored codebase structure
VSCode theme integration: Uses CSS variables for seamless light/dark mode support
Security: HTML escaping using lodash.escape() for defense-in-depth
Performance: Dynamic imports to optimize bundle size
Maintainability: Uses array.map() for cleaner code structure
Integrated with main branch refactoring: Compatible with new ToolsHelper class and registerToolsCommands structure
No breaking changes: All existing functionality remains intact

Merge Conflicts Resolved

Successfully resolved merge conflicts with the main branch:

Updated property names to match main branch refactoring (name, shortName, author instead of toolName, toolShortName, toolAuthor)
Kept description and emoji fields for the modern card design
Moved tool commands to registerToolsCommands.ts as per main branch structure
Updated ToolsListView.ts to use new property names
Integrated with new ToolsHelper class instead of deleted drbHelper

Testing

✅ Compilation successful in development and production modes
✅ Linting passed (warnings consistent with existing codebase)
✅ All files properly bundled in dist/ directory
✅ Merge conflicts resolved successfully
✅ Code review feedback addressed
✅ Modern design implemented with XrmToolBox inspiration
✅ No new errors introduced

Screenshots

The Tools Page features a modern, card-based interface:

Key Design Features:

Card-based grid layout with responsive design
Visual icons and gradient backgrounds
Rich descriptions for each tool
Hover effects with elevation and smooth transitions
Launch buttons with visual feedback
Tag badges showing tool short names
Enhanced search across all tool information

Usage

After merging, users can access the Tools Page by:

Opening Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and typing "Show Tools Page"
Clicking the table icon in the Power Platform ToolBox panel header

Fixes #295

Original prompt

This section details on the original issue you should resolve

<issue_title>[Feature]: Add a tools page that will list all the tools from the toolbox</issue_title>
<issue_description>### Is your feature request related to a problem?

No

Describe the problem?

Hard to see the details of the tools included in the toolbox from a side panel

Provide a solution or an idea you would like to see in the tool?

Create a webview that can be invoked from the toolbox section or command pallet. This webview will lost all the tools that are added to dvdt with an option to run them as well.

Relevant log output
```</issue_description>

## Comments on the Issue (you are @copilot in this section)

<comments>
</comments>

Fixes #295

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com>

Power-Maverick

@copilot look the the review comments.

Power-Maverick · 2025-10-12T22:04:45Z

@copilot make it look modern and take the inspiration from XrmToolBox

Done! The tools page now features a modern, card-based design inspired by XrmToolBox:

Changes in commit b513cb7:

Card-based grid layout with hover effects and smooth animations

Visual icons for each tool (🔧 🔌 📦 🚀)

Rich descriptions for better context

Gradient backgrounds and modern styling

Enhanced search across name, author, and description

Responsive design that adapts to screen size

Launch buttons with visual feedback

The design follows XrmToolBox's approach with attractive cards, clear visual hierarchy, and intuitive interactions.

Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com>

Power-Maverick · 2025-10-12T23:52:06Z

@copilot resolve conflicts

Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com>

Copilot · 2025-10-12T23:58:03Z

@copilot resolve conflicts

Conflicts resolved in commit 3a5ba1d!

Changes made:

Updated property names to match main branch refactoring (name, shortName, author instead of toolName, toolShortName, toolAuthor)
Kept description and emoji fields for the modern card design
Moved tool commands to registerToolsCommands.ts as per main branch structure
Integrated with new ToolsHelper class instead of deleted drbHelper
Updated ToolsListView.ts to use new property names

The modern card-based design is preserved and now compatible with the latest main branch.

…ng and tool launching logic

…ates

cyco77 · 2025-11-11T20:31:12Z

Really like that new view... please add it to the next release, I got some ideas to add there...

Flow Tool
Entity Documentation Helper
Plugin Documentation Helper
...

github-actions · 2025-12-27T02:13:44Z

This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 10 days.

github-actions · 2026-01-06T02:14:34Z

This PR was closed because it has been stalled for 10 days with no activity.

Initial plan

7b614c3

Copilot AI assigned Copilot and Power-Maverick Oct 12, 2025

Copilot started work on behalf of Power-Maverick October 12, 2025 09:54 View session

Copilot AI and others added 4 commits October 12, 2025 09:57

Initial commit - planning the tools page feature

c92f237

Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com>

Add tools page webview with list of all tools

77480e4

Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com>

Refactor ToolsListView to use array.map() for better maintainability

e0cef04

Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com>

Add HTML escaping for tool properties for defense-in-depth security

349ca41

Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add tools page to list all tools from toolbox~~ Add Tools Page webview to display all Power Platform ToolBox tools Oct 12, 2025

Copilot AI requested a review from Power-Maverick October 12, 2025 10:10

Copilot finished work on behalf of Power-Maverick October 12, 2025 10:10

fix: update command icons for tools page in package.json

d150d26

Power-Maverick requested changes Oct 12, 2025

View reviewed changes

Copilot started work on behalf of Power-Maverick October 12, 2025 22:17 View session

Modernize tools page with card-based design inspired by XrmToolBox

b513cb7

Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com>

Copilot AI changed the title ~~Add Tools Page webview to display all Power Platform ToolBox tools~~ Add modern card-based Tools Page webview for Power Platform ToolBox Oct 12, 2025

Copilot AI requested a review from Power-Maverick October 12, 2025 22:25

Copilot finished work on behalf of Power-Maverick October 12, 2025 22:25

Copilot started work on behalf of Power-Maverick October 12, 2025 23:52 View session

Resolve merge conflicts with main branch

3a5ba1d

Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com>

Copilot finished work on behalf of Power-Maverick October 12, 2025 23:59

Power-Maverick and others added 3 commits October 12, 2025 20:17

Merge branch 'main' into copilot/add-tools-page-to-toolbox

d6051ad

feat: enhance tools page layout and functionality with improved styli…

76e6fcc

…ng and tool launching logic

feat: add ERD Generator tool with command integration and package upd…

3386945

…ates

github-actions Bot added the Stale label Dec 27, 2025

github-actions Bot closed this Jan 6, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add modern card-based Tools Page webview for Power Platform ToolBox#296

Add modern card-based Tools Page webview for Power Platform ToolBox#296
Copilot wants to merge 11 commits intomainfrom
copilot/add-tools-page-to-toolbox

Copilot AI commented Oct 12, 2025 •

edited

Loading

Uh oh!

Power-Maverick left a comment

Uh oh!

Power-Maverick Oct 12, 2025

Uh oh!

Copilot AI Oct 12, 2025

Uh oh!

Power-Maverick commented Oct 12, 2025

Uh oh!

Copilot AI commented Oct 12, 2025

Uh oh!

cyco77 commented Nov 11, 2025

Uh oh!

github-actions Bot commented Dec 27, 2025

Uh oh!

github-actions Bot commented Jan 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

Copilot AI commented Oct 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Problem

Solution

🎨 Modern Card Interface

🔍 Enhanced Search

🚀 Quick Launch

🎯 Multiple Access Points

Implementation Details

New Files

Modified Files

Technical Highlights

Merge Conflicts Resolved

Testing

Screenshots

Key Design Features:

Usage

Describe the problem?

Provide a solution or an idea you would like to see in the tool?

Relevant log output

Uh oh!

Power-Maverick left a comment

Choose a reason for hiding this comment

Uh oh!

Power-Maverick Oct 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 12, 2025

Choose a reason for hiding this comment

Uh oh!

Power-Maverick commented Oct 12, 2025

Uh oh!

Copilot AI commented Oct 12, 2025

Uh oh!

cyco77 commented Nov 11, 2025

Uh oh!

github-actions Bot commented Dec 27, 2025

Uh oh!

github-actions Bot commented Jan 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Oct 12, 2025 •

edited

Loading